<template>
	<view class="wrapper">
		<view class="tiptop" v-if='companyData.status == "等待审核"'>资料审核中</view>
		<view class="tiptop nopass" v-if='companyData.status == "审核拒绝"'>审核未通过：{{companyData.remark}}</view>
		<view class="tiptop" v-if='isUpdata.tips_cost'>{{isUpdata.tips_cost}}</view>
		<u-form label-width="240" :model="form" ref="uForm">
			<view class="column">
				<view class="flag-title light-color">基础信息</view>
				<u-form-item required :border-bottom="false" prop="username" label="姓名">
					<u-input
						v-model="form.username"
						:custom-style="defaultInputStyle"
					/>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="companyAddressPath" label="性别">
					<u-radio-group
					    v-model="form.gender"
					    placement="column"
					  >
					  <view class="radio-view" v-for="(item, index) in sexs" :key="index">
					  	<u-radio active-color="#217bfb" label-size="25" shape="circle" :name="item.name">
					  		{{ item.name }}
					  	</u-radio>
					  </view>
					  </u-radio-group>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="phone" label="手机号">
					<u-input
						type="number"
						:custom-style="defaultInputStyle"
						v-model="form.phone"
					/>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="address_info" label="联系地址">
					<view style="width:100%;">
						<view @click="areavisible = true" class="areaview areaviewauto flex flex-row-between">
							{{ form.address ? form.address : '选择区域'}}
							<view>﹀</view>
						</view>
						<u-input
							:custom-style="defaultInputStyle"
							v-model="form.address_info"
							style="width: 100%;"
							type='textarea'
							placeholder='详细位置'
							:disabled="companyData && companyData.storeDisable === 'OPEN'"
						/>
					</view>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="email" label="电子邮箱">
					<u-input
						:custom-style="defaultInputStyle"
						v-model="form.email"
					/>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="photo" label="个人照片">
					<view>
						<u-upload
							:file-list="photo"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							width="200"
							:deletable="!companyData.storeDisable"
							@on-uploaded="onUploaded($event, 'photo')"
							:max-count="1"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
			</view>
			<view class="column">
				<view class="flag-title light-color">紧急联系人</view>
				<u-form-item :border-bottom="false" prop="jj_name" label="联系人姓名" required>
					<u-input
						:custom-style="defaultInputStyle"
						v-model="form.jj_name"
						:disabled="companyData && companyData.storeDisable"
					/>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="jj_phone" label="联系人电话" required>
					<u-input
					    type="number"
						:custom-style="defaultInputStyle"
						v-model="form.jj_phone"
						:disabled="companyData && companyData.storeDisable"
					/>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="jj_relation" label="与联系人关系" required>
					<u-input
						:custom-style="defaultInputStyle"
						v-model="form.jj_relation"
						:disabled="companyData && companyData.storeDisable"
					/>
				</u-form-item>
			</view>
			<view class="column">
				<view class="flag-title light-color">身份证信息</view>
				<u-form-item required :border-bottom="false" prop="id_card" label="身份证号">
					<u-input
						:custom-style="defaultInputStyle"
						v-model="form.id_card"
						:disabled="companyData && companyData.storeDisable"
					/>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="id_photos" label="身份证正反面">
					<view>
						<u-upload
							:file-list="id_photos"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							width="200" 
							@on-uploaded="onUploaded($event, 'id_photos')"
							:max-count="2"
							:deletable="!companyData.storeDisable"
							class="flex flex-row-between width80"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
			</view>
			<view class="column">
				<view class="flag-title light-color">车辆信息</view>
				<u-form-item :border-bottom="false" prop="car_num" label="车牌号码" required>
					<view class="cartype" @click="cityCarShow = true">晋A ﹀</view>
					<u-input
						:custom-style="defaultInputStyle"
						v-model="form.car_num"
						:maxlength='8'
						:disabled="companyData && companyData.storeDisable"
					/>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="driver_photos" label="驾驶证正反面">
					<view>
						<u-upload
							:file-list="driver_photos"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							:deletable="!companyData.storeDisable"
							width="200"
							@on-uploaded="onUploaded($event, 'driver_photos')"
							:max-count="2"
							class="flex flex-row-between width80"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="xs_photos" label="行驶证正反面">
					<view>
						<u-upload
							:file-list="xs_photos"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							:deletable="!companyData.storeDisable"
							width="200"
							@on-uploaded="onUploaded($event, 'xs_photos')"
							:max-count="2"
							class="flex flex-row-between width80"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
			</view>
			<view class="column">
				<view class="flag-title light-color">网约车证件</view>
				<u-form-item required :border-bottom="false" prop="companyAddressPath" label="是否有网络预约出租车运输证">
					<u-radio-group
					    v-model="form.is_seek"
					    placement="column"
						@change='changeIs_seek'
					  >
					  <view class="radio-view" v-for="(item, index) in seeks" :key="index">
					  	<u-radio active-color="#217bfb" label-size="25" shape="circle" :name="item.val">
					  		{{ item.name }}
					  	</u-radio>
					  </view>
					  </u-radio-group>
				</u-form-item> 
				<u-form-item :border-bottom="false" required prop="flowpath_photos" label="网约车申请流程表" v-if='form.is_seek == 2'>
					<view>
						<u-upload
							:file-list="flowpath_photos"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							width="200"
							ref="upload"
							@on-uploaded="onUploaded($event, 'flowpath_photos')"
							:max-count="1"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
				<u-form-item required :border-bottom="false" prop="qualification_photos" label="网约车申请资格证" v-if='form.is_seek == 2'>
					<view>
						<u-upload
							:file-list="qualification_photos"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							width="200"
							ref="upload2"
							@on-uploaded="onUploaded($event, 'qualification_photos')"
							:max-count="1"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
             	<u-form-item required :border-bottom="false" prop="wyc_photos" label="网络预约出租汽车运输证"  required  v-if='form.is_seek == 1'>
					<view>
						<u-upload
							:file-list="wyc_photos"
							ref="upload3"
							:header="{ Authorization: 'Bearer '+storage.getAccessToken() }"
							:action="action"
							width="200"
							@on-uploaded="onUploaded($event, 'wyc_photos')"
							:max-count="1"
							:show-progress="false"
						></u-upload>
					</view>
				</u-form-item>
			</view>
		</u-form>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="addressConfirm" @cancel="addressCancel" :visible="areavisible"/>
		<view class="submit" @click="validatorStep1Form" 
		  v-if='isUpdata.is_update'
		>
			{{isUpdata.show}}
		</view>
		<!--城市选择-->
		<u-select v-model="cityCarShow" :list="cityCar"></u-select>
	</view>
</template>

<script>
import { applyFirst } from "@/api/entry";
import storage from "@/utils/storage.js";
import { upload,isUpdate } from "@/api/common.js";
import { update,info } from "@/api/login.js";
import * as RegExp from "@/utils/RegExp.js";
import cityPicker from '@/components/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
export default {
	components: { cityPicker },
	data() {
		return {
			isUpdata:{},
			cityCar:[
				{
					value: '晋A',
					label: '晋A'
				},
			],
			cityCarShow:false,
			file:'',
			imgurl:'',
			maskCloseAble: true,
		    defaultValue: '140105',
		    defaultValue: ['山西省','太原市','小店区'],
			column: 3,
			areavisible:false,
			storage,
			action: upload, //图片上传数据
			defaultInputStyle: {
				background: "#f7f7f7",
				padding: "0 20rpx",
				"border-radius": "10rpx"
			},
			photo: [], //个人照片
			id_photos: [], //身份证
			xs_photos: [], //行驶证
			qualification_photos: [], //网约车申请资格证
			flowpath_photos: [], //网约车申请流程表
			driver_photos: [], //驾驶证
			wyc_photos:[], //网约车证件照
			sexs:[
				{ name:'男' },
				{ name:'女' },
			],
			seeks:[
				{ name:'有',val:1 },
				{ name:'没有',val:2 },
			],
			form: {
				username: "",
				address_info:'',
				phone:"",
				email:'',
				id_card:'',
				wyc_photos:'',
				gender:'男',
				car_num:'',
				jj_name:'',
				is_seek:1,
				jj_phone:'',
				jj_relation:'',
				photo:'',
				id_photos:"",
				address:'山西省太原市小店区',
				xs_photos:"",
				qualification_photos:'',
				flowpath_photos:'',
				driver_photos:''
			},
			list: [
				{
					id: "",
					localName: "请选择",
					children: []
				}
			],
			checkImgUp:false,
			photosArr:['driver_photos','flowpath_photos','id_photos','photo','qualification_photos','wyc_photos','xs_photos'],
			rules: {
				// 验证规则
				username: [{ required: true, message: "请填写姓名" }],
				address: [{ required: true, message: "请填写联系地址" }],
				jj_name: [{ required: true, message: "请填写紧急联系人 " }],
				jj_relation: [{ required: true, message: "与紧急联系人关系" }],
				car_num: [{ required: true, message: "请填写车牌号" }],
				phone: [
					{ required: true, message: "请填写手机号" },
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: "手机号码不正确",
						// 触发器可以同时用blur和change
						trigger: ["change", "blur"]
					}
				],
				jj_phone: [
					{ required: true, message: "请填写紧急联系人电话" },
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: "手机号码不正确",
						// 触发器可以同时用blur和change
						trigger: ["change", "blur"]
					}
				],
				email: [
					{ required: true, message: "请填写电子邮箱" },
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.email(value);
						},
						message: "请填写正确的电子邮箱",
						// 触发器可以同时用blur和change
						trigger: ["change", "blur"]
					}
				],
				id_card: [
					{ required: true, message: "请输入证件号" },
					//{ pattern: RegExp.IDCard, message: "请输入正确的证件号" }
				],
				photo: [{ required: true, message: "请上传个人照片" }],
				id_photos: [{ required: true, message: "请上传身份证" }],
				xs_photos: [{ required: true, message: "请上传行驶证" }],
				qualification_photos: [{ required: true, message: "请上传网约车申请资格证" }],
				flowpath_photos: [{ required: true, message: "请上传网约车申请流程表" }],
				driver_photos: [{ required: true, message: "请上传驾驶证" }],
				wyc_photos: [{ required: true, message: "网络预约出租汽车运输证" }]
			}
		};      
	},
	mounted(){
		if(!this.checkImgUp){
			this.$refs.uForm.setRules(this.rules);
			//获取个人信息
			this.getInfo()
			this.isUpdateCheck()
		}
	},
	props: ["companyData"],
	watch: {
	},
	methods: {
		isUpdateCheck(){
			isUpdate().then((res) => {
				this.isUpdata = res
			});
		},
		getInfo(){
			let that = this
			let photos = this.photosArr
			info().then((res) => {
				storage.setUserInfo(res);
				let data = JSON.parse(JSON.stringify(res.info))
			    that.form = res.info
				for(let key in data){
					if(photos.indexOf(key) > -1){
						that[key] = data[key]
					}
				}
				for (let i = 0; i <photos.length; i++){
					data[photos[i]].map(e=>{
						this.form[photos[i]] = []
						this.form[photos[i]].push('file'+e.url.split('/file')[1])
						this.form[photos[i]] = this.form[photos[i]].join(',')
					})
				}
				
				this.form.gender = data.gender || '男'
				this.form.is_seek = data.is_seek == 2 ? 2 : 1
				this.form.address = this.form.address ? this.form.address : '山西省太原市小店区'
				this.form.car_num = this.form.car_num.includes('晋A') ? this.form.car_num.split('晋A')[1] : this.form.car_num
			});
		},
		addressConfirm (val) {
			this.form.address = val.name
			this.areavisible = false
		},
		addressCancel () {
			this.areavisible = false
		},
		// 图片上传
		onUploaded(lists, key) {
			let images = [];
			lists.forEach((item) => {
				if(!!item.response){
					images.push(item.response.data.path);
				}else{
					images.push('file'+item.url.split('/file')[1]);
				}
			});
			this.form[key] = images.join(',')
			this.checkImgUp = true
		},
		// 显示三级地址联动
		showPicker() {
			this.$refs.cityPicker.show();
		},
		validatorStep1Form() {
			this.$refs.uForm.validate(async (valid) => {
				if (valid) {
					const params = { ...this.form };
					params.car_num = '晋A'+this.form.car_num
					update(params).then((res) => {
						info().then((res) => {
							storage.setUserInfo(res);
							uni.switchTab({
								url:'/pages/tabbar/user/my'
							})
						});
					});
				}
			});
		},
		nextStep() {
			this.$emit("callback", 0);
		},
		changeIs_seek(){
			if(this.form.is_seek == 2){
				this.$refs.upload.clear();
				this.$refs.upload2.clear();
				this.form.flowpath_photos = []
				this.form.qualification_photos = []
			}else{
				this.form.wyc_photos = []
				this.$refs.upload3.clear();
			}
		}
	}
};
</script>
<style>
/* page {
  background: #fff;
} */
</style>
<style lang="scss" scoped>
@import url("./entry.scss");
.areaview{
	width: 100%;
	height: 36px;
	background-color:rgb(247, 247, 247);
	line-height: 36px;
	color: #303133;
	padding:0 10px;
	margin-bottom: 5px;
}
.areaviewauto{
	height: auto;
	padding: 5px 10px;
	line-height: 22px;
}
.column {
	padding: 32rpx;
	margin-bottom: 20rpx;
	background: #fff;
}
.submit {
	color: #fff;
	margin-top: 120rpx;
	background: rgba($light-color, 0.8);
}
.tips {
	color: #999;
	font-size: 24rpx;
	line-height: 1.2;
	margin-top: 10rpx;
}
::v-deep {
	.no-del .u-delete-icon {
		display: none;
	}
}
.tiptop{
	height: 40px;
	line-height: 40px;
	color:#fff;
	background-color: #666;
	text-align: center;
}
.nopass{
	background-color: red;
	height: auto;
	line-height: 22px;
	padding: 5px;
}
.cartype{
	min-height: 37px;
	background: rgb(247, 247, 247);
	padding-left:10px;
}
</style>
